Skip to main content

Development Environment Setup

Alright, so you want to do some development - Awesome! You're in the right place.

0. Enable Virtualisation in your BIOS​

In order to setup an emulator you need to have enabled Intel or AMD's respective virtualisation support in the BIOS. It is disabled by default on most systems. You can find specific instructions on how to do this by searching "enable virtualisation via bios on x laptop/CPU" or you can follow RedHat's general instructions here as a rough guide, if you're comfortable navigating your BIOS.

1. IDE: Visual Studio Code​

Install Visual Studio Code.

2. Install Node.js​

While the app isn't written in Node.js a lot of the tooling for the app is, so you will need to install Nodejs which you can do here: https://nodejs.org/en/download/

The latest LTS should work just fine.

Let's move on now that we have the bulk of the downloading done.

2. Clone repository​

Using the VSCode Interface you can clone phonlab-tcd/mao-app directly. It will prompt you to login, which you must do as the mao-app repository is currently private.

3. Intall Dependencies​

Now you have cloned the repository and have it open in visual studio code you now need to install the javascript packages the app depends on such as expo, redux, and the hundreds of other packages/transitive dependencies.

npm install

This may take a while.

4. Launch Expo !​

Almost ready to run the app! Now you can start expo which will compile the app and bundle it.

Type

npx expo start

In the root of the project and you'll be greeted with a QR code which you can use to scan the app onto your phone (if you have EXPO GO installed on your phone) But mainly I would recommend using the emulator which you can open by typing 'a' into the terminal (no need to press enter, it captures it automatically) It should open the emulator and install expo go for you (will take some time)

Once it's done it should open Expo Go and launch the app. This will give you a login screen.

5. Creating a development account​

This may need updating in the near future, as the account system is currently an early implementation

Go to the backoffice's account editor here: https://backoffice.abair.ie/accounts and click the red plus next to "Text Accounts"

Now fill in a set of test credentials, it doesn't need to be a real email, just a valid one. And whatever password you want. This backoffice is configured to modify the development environment, not the production environment. It uses all the same security mechanisms as production, though.

6. Login to the app​

Now you're logged in to the app and ready to code! Go forth and use all that React/React native you've learned!

Notes / Tips​

  • The backoffice uses NPM, so install its dependencies by using npm i.
  • Make sure always to have your supabase configured to the development supabase environment (currently default, won't be in the near future)
  • Don't put passwords or secrets in the git repository, they're stored for all of time, even if you remove them in a later commit.
  • If you're developing with one monitor on windows you might fight Windows PowerToys useful, which includes a tool which lets you toggle a window to be "always" on top allowing you to place your emulator on top of your IDE in the corner without it disappearing every time you click back into your ID.

If you feel this guide wasn't sufficient, you got stuck, ran into an issue or feel like something is missing, reach out to a developer who's already onboarded (e.g. Rían)